<template>
  <div>
    <Title title="你的专属歌单" />
    <div class="grid grid-flow-row gap-5 grid-cols-5 lg:grid-cols-5 2xl:grid-cols-10">
      <div v-for="item in personalizedList" :key="item.id">
        <div @click="toExclusivePlaylist()">
          <CoverMark :pic-url="item.picUrl" :name="item.name" :play-count="item.playCount" />
          <div class="truncate text-xs mt-2">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Title from '../title/Title.vue'
import CoverMark from '../cover-mark/coverMark.vue'
import { useMusicStore } from '@/stores/music'
import { toRefs } from 'vue'
const { personalizedList, getRecommendList, toExclusivePlaylist } = toRefs(useMusicStore())

getRecommendList.value()
</script>

<style lang="less" scoped></style>
